<html>

<head>
    <title>Bundled TimelineJS test page</title>
    <!-- this is normally done by embed page -->
    <script>
        function ready(fn) {
            if (document.readyState != 'loading') {
                fn();
            } else {
                document.addEventListener('DOMContentLoaded', fn);
            }
        }
        ready(function() {

            // sanitize test
            // var dataUrl = 'https://docs.google.com/spreadsheets/d/1Q4-R3mlK7w1liCEl5_SGPaeLpfHDVdMtc83rjSTHBZo/edit#gid=0'

            // Zander Work's exploit
            // var dataUrl = 'https://docs.google.com/spreadsheets/d/1Jt5Csoku0W73100mnG_byVdvCFLXT8G5gG9lu1yggA0/edit#gid=0'

            // women in computing:
            var dataUrl = 'https://docs.google.com/spreadsheets/u/1/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/pubhtml';

            // some history of shoes:
            // var dataUrl = 'https://docs.google.com/spreadsheets/d/1HJSPzn0vzLl7x2Xlkln8m_PHHi0KS4tgWNkGk6Z5JvU/pubhtml'

            // var dataUrl = './all-media-types.json'

            // var dataUrl = './eras.json'

            var options = {
                language: 'es',
                debug: true,
                height: 650,
                soundcite: true,
                sheets_proxy: 'https://sheets-proxy.knightlab.com/proxy/'
            }
            window.timeline = new TL.Timeline('timeline-embed', dataUrl, options)

            window.timeline.on("ready", () => {
                console.log("Timeline ready event fired")
            })


            document.getElementById('timeline-src').value = dataUrl
            document.getElementById('timeline-src').addEventListener('keyup', (e) => {
                e.preventDefault();
                if (e.keyCode === 13) {
                    document.getElementById('timeline-embed').innerHTML = ''
                    var dataUrl = document.getElementById('timeline-src').value
                    window.timeline = new TL.Timeline('timeline-embed', dataUrl, options)
                } else {
                    console.log(e.keyCode)
                }
            })
        })
    </script>
    <style>
        body {
            font-family: sans-serif;
            background-color: #ddd;
        }
        
        #timeline-embed {
            margin: 1em 0;
            height: 650px;
        }
        
        input[type="text"] {
            font-size: 12pt
        }
    </style>
</head>

<body>
    <h1>Timeline Development</h1>
    <div>
        <label for="timeline-src">data source URL:</label><input type="text" size="120" name="timeline-src" id="timeline-src">
    </div>
    <div id='timeline-embed'></div>
</body>

</html>